@import "../../assets/styles/variables";

.contacts__item {
  display: flex;
  flex-direction: column;
  position: relative;

  &-control {
    display: flex;
    position: absolute;
    width: 95%;
    height: 100%;
    justify-content: flex-end;
    align-items: center;
    visibility: hidden;

    &-button {
      border: none;
      background-color: transparent;
      cursor: pointer;
      margin: 0 3px;
      z-index: 110;

      &-accept {
        cursor: pointer;
        border: unset;
        background-color: unset;
        width: 25px;
        height: 25px;
        background-image: url("../../assets/img/accept.svg");
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
      }

      &-delete {
        cursor: pointer;
        border: unset;
        background-color: unset;
        width: 25px;
        height: 25px;
        background-image: url("../../assets/img/redTrash.svg");
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
      }
    }

    &-button:hover, &-button:active {
      transform: scale(1.2);
      background-color: #ffffff;
      border-radius: 50%;
    }
  }
}

.contacts__item:hover, .contacts__item:active {
  .contacts__item-control {
    visibility: visible;
  }
}